<template>
  <div>
    <!-- 导入Excel -->
    <!-- ： 父传子 -->
    <upload-excel :before-upload="beforeUpload" :on-success="onSuccess" />
  </div>
</template>

<script>
import UploadExcel from "@/components/UploadExcel/index";
import { getImportJsData } from "@/utils/excel";
import { importEmployee } from '@/api/employees';
export default {
  components: {
    UploadExcel,
  },
  methods: {
    // 解析前
    beforeUpload(file) {
      // file excel文件
      const isLt1M = file.size / 1024 / 1024 < 1;
      if (isLt1M) {
        return true;
      }
      this.$message({
        message: "体积不能超过1M",
        type: "warning",
      });
      return false;
      // 这个函数必须return一个布尔值 并且只有return出去时true的时候
      // 才会执行后续的解析操作
      // 如果在这里校验不过不会进行正式的解析操作
    },
    // 解析成功后
    async onSuccess({ results, header }) {
      // 插件把一个excel解析成了普通的对象数组 和一个代表表头的字符串数组
      console.log(results, header);
      // 调用合适的接口把js数据加入到后端的数据库
      // 后端接口要求的格式和我们五年插件解析出来的格式对不懂行
      // 提交之前先做二次转化 然后提交 【直接使用线程的转化工具函数】
      const headerRelation = {
        姓名: "username",
        手机号: "mobile",
        入职日期: "timeOfEntry",
        工号: "workNumber",
        聘用形式: "formOfEmployment",
        部门: "departmentName",
      };
      const data = getImportJsData(results, headerRelation);
      // 调用接口
      await importEmployee(data);
    },
  },
};
</script>

<style>
</style>